<template>
	<div class="backBb">
		<topHeader @examchangevalue="examchangevalue"></topHeader>
        <div class="brandXie">
			<div class="projectLeftnav">
				<el-row class="tac">
				  <el-col :span="24">
                    <span>考试信息</span>
                    <ul>
                        <li :class="{'hover': activePath === '/maincover/projectoverview'}" 
                            @click="overviewclick('/maincover/projectoverview')">项目概况</li>
                        <li :class="{'hover': activePath === '/maincover/referenceschools'}" 
                            @click="overviewclick('/maincover/referenceschools')">参考学校</li>
                        <li :class="{'hover': activePath === '/maincover/studentinfo'}" 
                            @click="overviewclick('/maincover/studentinfo')">考生信息</li>
                        <li :class="{'hover': activePath === '/maincover/teacherinfo'}" 
                            @click="overviewclick('/maincover/teacherinfo')">评阅教师</li>
                    </ul>
				  </el-col>
				</el-row>
			</div>
			<div class="selectExamContain">
				<router-view ref="childComponent"></router-view>
			</div>
		</div>
	</div>
</template>

<script>
import topHeader from '../../components/top.vue' 
export default {
    data() {
        return {
            activePath: '', // 添加当前激活路径
        }
    },
    created() {
        this.updateActivePath() // 初始化时设置激活路径
    },
    watch: {
        '$route.path': 'updateActivePath' // 监听路由变化更新激活状态
    },
    methods:{
        examchangevalue(value){
            this.$store.commit('setExamId', value);
        },
        overviewclick(path){
            this.$router.push({path:path})
        },
        updateActivePath() {
            this.activePath = this.$route.path // 更新当前激活路径
        }
    },
    components: {
        topHeader,
    }
}
</script>

<style scoped>
.backBb{
    background:#eee;
}
.brandXie{
    margin:0 auto;
    display: flex;
    justify-content:space-between
}
.projectLeftnav{
    min-height:calc(100vh - 68px);
    width:200px;
    background:#fff;
    padding:10px 0px;
    box-sizing: border-box;
}
.projectLeftnav span{
    font-size:12px;
    color:rgba(0, 0, 0, 0.4);
    padding:0 20px;
}
.projectLeftnav ul{
    margin-top:10px;
}
.projectLeftnav ul li{
    font-size:14px;
    line-height:40px;
    color: rgba(0, 0, 0, 0.6);
    cursor: pointer;
    padding:0 20px;
}
.projectLeftnav ul li:hover,.projectLeftnav ul li.hover{
    background: #F2F3FF;
    color:#0052D9
}
.selectExamContain{
    padding:15px;    
    width: calc(100% - 200px);
}
</style>